<template>
  <div>
    <div v-if="loading==0" class="load-more">正在加载...</div>
    <!-- <div v-if="currentPage==pageCount" class="load-more">没有更多数据</div>-->
  </div>
</template>
<script>
export default {
  props: {
    pageCount: {
      type: Number,
      default: 1
    }, // 页数
    divId: {
      type: String,
      default: ''
    }, // 所在的盒子
    currentPage: {
      type: Number,
      default: 1
    }// 当前页
  },
  data() {
    return {
      // currentPage: 1,
      isStop: 0,
      loading: 1
    }
  },
  watch: {
    pageCount() {
    }
  },
  mounted() {
    // 注册scroll事件并监听
    this.$nextTick(() => {
      const _this = this
      const div = document.getElementById(this.divId)
      div.addEventListener('scroll', () => {
      // 判断是否滚动到底部
        if (_this.getScrollHeight() === 760) {
          if (_this.hasMore() && _this.getScrollTop() + _this.getHeight() > (_this.getScrollHeight() - 20) && _this.loading === 1 && _this.isStop === 0) {
          // 如果开关打开则加载数据
            if (_this.hasMore()) { // 还有数据
              _this.currentPage++
              _this.loading = 0
              _this.$emit('current-change', _this.currentPage)
            }
          }
        }
      })
    })
  },
  methods: {
    stopLoad() {
      this.isStop = 1
    },
    startLoad() {
      this.isStop = 0
    },
    hasMore() {
      return this.currentPage < (this.pageCount)
    },
    loadFinish() {
      setTimeout(() => {
        this.loading = 1
      }, 1000)
    },
    resetPagination() {
      this.currentPage = 0
      document.getElementById(this.divId).scrollTop = 0
    },
    getScrollTop() {
      const div = document.getElementById(this.divId)
      return div.scrollTop
    },
    getScrollHeight() {
      const div = document.getElementById(this.divId)
      return div.scrollHeight
    },
    getHeight() {
      const div = document.getElementById(this.divId)
      return div.clientHeight
    }
  }
}
</script>
    <style scoped lang="scss">
      .load-more{
        text-align: center;
        color:#666;
        margin-top:20px;
      }
    </style>

